<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.clientName','应用名称')" prop="clientName">
                                <a-input :placeholder="i18n('form.clientName','请输入应用名称','input')" v-model="mdl.clientName" />
                            </a-form-model-item>
                        </a-col>
						<a-col :span="12">
								<a-form-model-item :label="i18n('form.clientId','应用ID')"   v-model="mdl.clientId" prop="clientId" >
									<a-input :placeholder="i18n('form.clientId','应用ID','input')" v-model="mdl.clientId" />
								</a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.secret','密钥')" prop="clientSecretStr" :label-col="labelCol1"
                                               :wrapper-col="wrapperCol1">
                                <a-input :placeholder="i18n('form.secret','密钥','input')" v-model="mdl.clientSecretStr" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.redirectUri','跳转地址')" prop="webServerRedirectUri" :label-col="labelCol1"
                                :wrapper-col="wrapperCol1">
                                <a-input :placeholder="i18n('form.redirectUri','请输入跳转地址','input')" v-model="mdl.webServerRedirectUri" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="'token'+i18n('form.Validity','有效期')" prop="accessTokenValidity">
                                <a-input type="number" :placeholder="'token'+i18n('form.Validity','有效期')" v-model="mdl.accessTokenValidity"
                                    :suffix="i18n('form.second','秒')" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.refresh','刷新')+i18n('form.Validity','有效期')" prop="refreshTokenValidity">
                                <a-input type="number" :placeholder="i18n('form.refresh','刷新')+i18n('form.Validity','有效期')" v-model="mdl.refreshTokenValidity" :suffix="i18n('form.second','秒')" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.clientName','授权方式')" prop="authorizedGrantTypes" :label-col="labelCol1"
                                :wrapper-col="wrapperCol1">
                                <a-select v-model="authorizedGrantTypes" style="width: 100%" mode="multiple">
                                    <a-select-option value="authorization_code">{{i18n('authType.code','授权码')}}</a-select-option>
                                    <a-select-option value="password">{{i18n('authType.password','密码')}}</a-select-option>
                                    <a-select-option value="refresh_token">{{i18n('authType.immdRefresh','实时刷新')}}</a-select-option>
                                    <a-select-option value="client_credentials">{{i18n('authType.client','客户端')}}</a-select-option>
                                    <a-select-option value="implicit">implicit</a-select-option>
                                    <a-select-option value="password_code">{{i18n('authType.imageCode','图形验证码')}}</a-select-option>
                                    <a-select-option value="openId">openId</a-select-option>
                                    <a-select-option value="mobile_password">{{i18n('authType.mobilePassword','移动端密码')}}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.scope','范围')" prop="scope">
                                <a-input placeholder="范围" v-model="mdl.scope" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.enable','启用')" prop="enable">
                                <a-switch v-model="enable" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <rx-icon ref="rxIcon" class="ins-app-rx-icon" @certainIcon="certainIcon" :system="system"
                                :bgColor="iconColor" :icon="icon" :iconType="'custom'"></rx-icon>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import OauthClientDetailsApi from '@/api/auth/oauthClientDetails'
import { RxDialog, BaseFormModel } from "@lowcode/jpaas-common-lib";
import rxInputIcon from "@/components/rxComponent/rx-input-icon";
import RxIcon from "@/components/rxComponent/rx-icon";

export default {
    name: 'OauthClientDetailsEdit',
    mixins: [BaseFormModel],
    components: {
        RxDialog,
        rxInputIcon,
        RxIcon
    },
    data() {
        return {
            /**
             * 子表列表，以及表格属性
             */
            subTable: {},
            rules: {
                clientId: [{ required: true, message: this.i18n('form.clientId','请输入应用标识','input'), trigger: 'change' }],
                clientName: [{ required: true, message: this.i18n('form.clientName','请输入应用名称','input'), trigger: 'change' }],
                clientSecretStr: [{ required: true, message: this.i18n('form.secret','请填写应用明文密钥','input'), trigger: 'change' }],
                webServerRedirectUri: [{ required: true, message: this.i18n('form.redirectUri','请输入回调地址','input'), trigger: 'change' }],
                accessTokenValidity: [{ required: false, message:'token'+this.i18n('form.Validity','有效期'), trigger: 'change' }],
                refreshTokenValidity: [{ required: false, message: this.i18n('form.refresh','刷新')+this.i18n('form.Validity','有效期'), trigger: 'change' }],
                enable: [{ required: false, message: this.i18n('form.enable','启用','input'), trigger: 'change' }]
			},
            //是否启用
            enable: false,
          authorizedGrantTypes: [],
            system: 'lineage',
            icon: "{\"type\":\"jpaasIcon\",\"icon\":\"iconportal\"}",
            iconColor: 'linear-gradient(0deg,#2b76f3 0%,#6db6fb 100%)',
            clientTypeList: [],
        }

    },
    created() {
        this.getClientTypeList();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"oauthClientDetails",key);
        },
        getClientTypeList() {
            OauthClientDetailsApi.getTopDicByKey().then((data) => {
                this.clientTypeList = data
            })
        },
        onload_(values) {
            if (values) {
                this.enable = values.enable == "1";
              this.authorizedGrantTypes = values.authorizedGrantTypes.split(",");
                if (values.icon) {
                    var iconfont = JSON.parse(values.icon);
                    iconfont.icon = JSON.stringify({type:iconfont.type,icon:iconfont.icon});
                    this.$set(this, "icon", iconfont.icon);
                    this.$set(this, "iconColor", iconfont.iconColor);
                    this.$set(this, "system", iconfont.system);
                }
            } else {
                this.$set(this.mdl, "authorizedGrantTypes", "authorization_code");
                this.$set(this.mdl, "accessTokenValidity", 3600);
                this.$set(this.mdl, "refreshTokenValidity", 3600);
                this.$set(this.mdl, "scope", "all");
            }
        },
        get(id) {
            return OauthClientDetailsApi.get(id);
        },
        save() {
            this.mdl.enable = this.enable ? "1" : "0";
            this.mdl.authorizedGrantTypes = this.authorizedGrantTypes.join(",");
            var iconfont = {
                type: JSON.parse(this.icon).type,
                icon: JSON.parse(this.icon).icon,
                iconColor: this.iconColor,
                system: this.system,
            }
            this.mdl.icon = JSON.stringify(iconfont);
            return OauthClientDetailsApi.save(this.mdl);
        },
        certainIcon(icon,bgColor,system){
            this.iconColor = bgColor;
            this.icon = icon;
            this.system = system;
        },
    }
}
</script>
<style>
.relick a {
    margin-right: 10px;
}
</style>
